@import "tailwindcss";
@import "tw-animate-css";
@plugin "@tailwindcss/typography";

@custom-variant dark (&:is(.dark *));

@theme {
  --font-sans:
    var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --animate-fade-in: fade-in 1s;
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  --animate-spotlight: spotlight 2s ease 0.75s 1 forwards;
  @keyframes spotlight {
    0% {
      opacity: 0;
      transform: translate(-72%, -62%) scale(0.5);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -40%) scale(1);
    }
  }
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-app: var(--app-background);
  --color-brand: var(--brand);
  --animate-aurora: aurora 8s ease-in-out infinite alternate;
  @keyframes aurora {
    0% {
      background-position: 0% 50%;
      transform: rotate(-5deg) scale(0.9);
    }
    25% {
      background-position: 50% 100%;
      transform: rotate(5deg) scale(1.1);
    }
    50% {
      background-position: 100% 50%;
      transform: rotate(-3deg) scale(0.95);
    }
    75% {
      background-position: 50% 0%;
      transform: rotate(3deg) scale(1.05);
    }
    100% {
      background-position: 0% 50%;
      transform: rotate(-5deg) scale(0.9);
    }
  }
  --animate-shine: shine var(--duration) infinite linear;
  @keyframes shine {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
}

:root {
  --radius: 0.625rem;
  --app-background: #fffaf5;
  --background: oklch(1 0 0);
  --foreground: rgba(0, 0, 0, 0.72);
  --card: oklch(1 0 0);
  --card-foreground: var(--foreground);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --brand: #007aff;

  --novel-highlight-default: #ffffff;
  --novel-highlight-purple: #f6f3f8;
  --novel-highlight-red: #fdebeb;
  --novel-highlight-yellow: #fbf4a2;
  --novel-highlight-blue: #c1ecf9;
  --novel-highlight-green: #acf79f;
  --novel-highlight-orange: #faebdd;
  --novel-highlight-pink: #faf1f5;
  --novel-highlight-gray: #f1f1ef;
}

.dark {
  --background: oklch(0.145 0 0);
  --app-background: var(--background);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 20%);
  --input: oklch(1 0 0 / 25%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
  --brand: rgb(17, 103, 234);

  --novel-highlight-default: #000000;
  --novel-highlight-purple: #3f2c4b;
  --novel-highlight-red: #5c1a1a;
  --novel-highlight-yellow: #5c4b1a;
  --novel-highlight-blue: #1a3d5c;
  --novel-highlight-green: #1a5c20;
  --novel-highlight-orange: #5c3a1a;
  --novel-highlight-pink: #5c1a3a;
  --novel-highlight-gray: #3a3a3a;
}

/* 智能滚动条管理 - 防抖动解决方案 */
:root {
  --scrollbar-width: 17px;
  --layout-offset: 0px;
}

/* 使用scrollbar-gutter预留滚动条空间，避免抖动 */
html {
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  /* 确保html不会影响内容布局 */
  box-sizing: border-box !important;
}

body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-y: auto !important;
  scrollbar-gutter: stable;
  /* 确保body内容不受影响 */
  box-sizing: border-box !important;
}

/* 当弹窗等组件设置overflow:hidden时的处理 */
body[style*="overflow"],
body[style*="overflow-y"],
body[data-scroll-locked],
body.overflow-hidden,
body.no-scroll {
  /* 锁定页面滚动，但保持布局宽度 */
  overflow-y: hidden !important;
  position: fixed !important;
  width: 100% !important;
  scrollbar-gutter: stable;
  /* 使用margin而不是padding来避免内容挤压 */
  margin-right: var(--scrollbar-width) !important;
}

/* 针对Radix UI组件的处理 */
body[data-radix-scroll-area-viewport] {
  overflow-y: auto !important;
  scrollbar-gutter: stable;
}

/* 确保所有弹窗类组件不影响页面布局 */
[data-radix-portal],
[data-radix-popper-content-wrapper],
[data-radix-dropdown-menu-content],
[data-radix-select-content],
[data-radix-popover-content] {
  position: fixed !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

[data-radix-portal] > *,
[data-radix-popper-content-wrapper] > *,
[data-radix-dropdown-menu-content],
[data-radix-select-content],
[data-radix-popover-content] {
  pointer-events: auto !important;
}

/* 防止动画影响布局 */
[data-state="open"],
[data-state="closed"] {
  will-change: opacity, transform !important;
}

/* 特别处理下拉菜单 */
[data-radix-dropdown-menu-content][data-state="open"],
[data-radix-select-content][data-state="open"],
[data-radix-popover-content][data-state="open"] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin, center) !important;
}

/* 浏览器兼容性 - 对于不支持scrollbar-gutter的浏览器 */
@supports not (scrollbar-gutter: stable) {
  html {
    padding-right: var(--scrollbar-width, 17px) !important;
    box-sizing: border-box !important;
  }
  
  body {
    margin-right: calc(-1 * var(--scrollbar-width, 17px)) !important;
    box-sizing: border-box !important;
  }
}

/* 特殊处理 - 确保弹窗不会被滚动条影响 */
[data-radix-portal] {
  /* 确保portal内容不受padding影响 */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* 确保主要内容区域不受滚动条影响 */
main, 
.main-content,
.content-area {
  /* 使用CSS变量确保布局稳定 */
  width: calc(100% - var(--layout-offset)) !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 响应式处理 */
@media (max-width: 768px) {
  /* 移动设备通常不显示滚动条，所以重置相关设置 */
  :root {
    --scrollbar-width: 0px;
  }
  
  html, body {
    scrollbar-gutter: auto;
  }
  
  @supports not (scrollbar-gutter: stable) {
    html, body {
      padding-right: 0 !important;
      margin-right: 0 !important;
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  
  body {
    @apply bg-background text-foreground;
  }
}

input,
textarea {
  outline: none;
}

[role="button"],
button {
  cursor: pointer;
}
